<!-- 显示逻辑设置组件 -->
<template>
    <Drawer title="显示逻辑设置" v-model="showDrawer" width="700" @on-visible-change="changeVisible" :mask-closable="false"
        scrollable class-name="show_config_box">
        <div class="add_box">
            <Icon type="md-add" />
            <div class="label">添加显示规则</div>
        </div>
        <div class="rule_item" v-for="(item, index) in dynamicForm.formList[dynamicForm.currentIndex].config.showConfig">
            <div class="item_top">
                <div class="title"><Icon type="md-git-merge" size="20px" />规则{{ index + 1 }}</div>
                <div class="btns_box">
                    <text-btn @click="openEdit(index)" />
                    <text-btn type="del" @click="dynamicForm.delShowRules(index)" />
                </div>
            </div>
            <div class="item_center">
                <div class="left">当条件为:</div>
                <div class="right">
                    <div class="rule" v-for="(rule, ruleIndex) in item.ruleList" :key="ruleIndex">
                        <div class="rule_key">{{ rule.key }}</div>
                        <div class="rule_isEqual">{{ isEqualObj[rule.isEqual] }}</div>
                        <div class="rule_value">{{ handleValueStr(rule.value) }}</div>
                    </div>
                </div>
            </div>
            <div class="item_bottom">
                <div class="left">则显示:</div>
                <div class="right">{{ handleShowKeyStr(item.showKeys) }}</div>
            </div>
        </div>
        <div class="rule_item">
            <div class="item_top">
                <div class="title"><Icon type="md-git-merge" size="20px" color="#2d8cf0" />规则1</div>
                <div class="btns_box">
                    <text-btn />
                    <text-btn type="del" />
                </div>
            </div>
            <div class="item_center">
                <div class="left">
                    <div class="left_item">当条件为:</div>
                    <div class="left_item">或:</div>
                </div>
                <div class="right">
                    <div class="rule">
                        <div class="rule_key">下拉选择</div>
                        <div class="rule_isEqual">等于</div>
                        <div class="rule_value">123，321</div>
                    </div>
                </div>
            </div>
            <div class="item_bottom">
                <div class="left">则显示:</div>
                <div class="right">
                    单行文本 | 多行文本
                </div>
            </div>
        </div>
    </Drawer>
</template>

<script setup>
import { ref } from 'vue';
import { dynamicFormStore } from '@/store/dynamicForm';

const dynamicForm = dynamicFormStore();

const porps = defineProps({

});

// 示例对象
const obj = {
    rules: [
        {
            key: '', // 判断组件key
            isEqual: '', // 是否等于
            value: [], // 判断组件value
        }
    ],
    elseList: [], // 与或，
    showKeys: [] // 展示组件key
}

const showEdit = ref(false);

// 等或不等
const isEqualList = ref([
    { label: '等于', value: 'equal' },
    { label: '不等于', value: 'unequal' }
]);
const isEqualObj = ref({
    equal: '等于',
    unequal: '不等于'
})

// 与，或
const elseList = ref([
    { label: '或', value: 'or' },
    { label: '且', value: 'and' },
]);
const elseObj = ref({
    or: '或',
    and: '且'
})

const emit = defineEmits(['cancel']);

const showDrawer = ref(true);

// 打开编辑或新增规则弹框
const openEdit = (index) => {
    
}

// 关闭抽屉
const cancel = () => {
    emit('cancel');
}
</script>

<style lang="scss">
.ivu-drawer-mask {
    display: none;
}
.show_config_box {
    .add_box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 15px;
        color: #2d8cf0;
        cursor: pointer;
        i {
            margin-bottom: 2px;
        }
    }
    .rule_item {
        border: 1px solid #f1f1f1;
        border-radius: 5px;
        padding: 10px;
        border-left: 5px solid #2d8cf0;
        .item_top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title {
                font-weight: bold;
                i {
                    margin-right: 5px;
                }
            }
            .btns_box {
                display: flex;
            }
        }
    }
}
</style>